<template>
  <div class="box-main">
    <img class="img" src="@/assets/images/Obtain/icon2.png" alt="" />
    <div class="card">
      <div class="card-list">
        <div class="card-list-item" v-for="v in list" :key="v.label">
          <div class="card-list-item-bg" :style="{ background: v.bgColor }">
            <img :src="getImageUrl(v.img)" alt="" />
          </div>
          <div class="flex-center">
            <span>{{ v.label }}</span>
            <span class="card-list-item-num">{{ v.value }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="btn">确定</div>
  </div>
</template>
<script setup>
const getImageUrl = (name) => {
  return new URL(`../../assets/images/Obtain/${name}`, import.meta.url).href
}
const list = [
  { label: '金币', value: 20000, img: 'icon3.png', bgColor: 'linear-gradient( 192deg, #FFF5EB 0%, #FFF5D5 98%)' },
  { label: '魔钻', value: 30000, img: 'icon4.png', bgColor: 'linear-gradient( 12deg, #FFD1FA 0%, #F5ECFD 99%)' },
  { label: '星钻', value: 10000, img: 'icon5.png', bgColor: 'linear-gradient( 360deg, #C2BCFF 0%, #E1E8FF 100%)' },
  { label: '提现金', value: 30, img: 'icon6.png', bgColor: 'linear-gradient( 192deg, #FFF5EB 0%, #FFF5D5 98%)' },
]
</script>
<style lang="scss" scoped>
.box-main {
  padding: 6.41rem 5.64rem;
  background-image: url('@/assets/images/Obtain/icon1.png');
  background-size: cover;

  .img {
    width: 36.92rem;
    height: 6.15rem;
    display: block;
  }

  .card {
    margin-top: 4.36rem;
    padding: 15.13rem 2.56rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 2.56rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 3.08rem;
    color: #999999;
    line-height: 4.36rem;

    &-list {
      display: flex;
      align-items: center;
      justify-content: space-between;

      &-item {
        display: flex;
        align-items: center;
        flex-direction: column;

        &-bg {
          width: 10.77rem;
          height: 10.77rem;
          background: linear-gradient(192deg, #FFF5EB 0%, #FFF5D5 98%);
          border-radius: 36.67rem 36.67rem 36.67rem 36.67rem;
          margin-bottom: 1.54rem;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 5.64rem;
            height: 5.64rem;
            display: block;
          }
        }



        &-num {
          font-size: 2.56rem;
          color: #999999;
          line-height: 3.59rem;
        }
      }
    }
  }

  .btn {
    background: linear-gradient(270deg, #FFB776 0%, #FF586A 100%);
    border-radius: 2.56rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 4.1rem;
    color: #FFFFFF;
    line-height: 5.64rem;
    padding: 3.59rem 0 3.33rem 0;
    text-align: center;
    margin-top: 6.92rem;
  }

  .flex-center {
    display: flex;
    align-items: center;
  }
}
</style>